interface MoneyInputProps {
    type: 'FROM' | 'TO';
    amount: number;
    fromCurrency: string;
    toCurrency: string;
    currencies: string[];
    onAmountChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onToCurrencyChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
    onFromCurrencyChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
    readOnly?: boolean;
}

const MoneyInput: React.FC<MoneyInputProps> = ({
    amount,
    fromCurrency,
    toCurrency,
    currencies,
    onAmountChange,
    onFromCurrencyChange,
    onToCurrencyChange,
    type,
    readOnly = false
}) => {
    return (
        <div className="currency-input">
            <input
                type="number"
                value={amount}
                onChange={onAmountChange}
                disabled={readOnly} />

            <select
                value={type == 'FROM' ? fromCurrency : toCurrency}
                onChange={type == 'FROM' ? onFromCurrencyChange : onToCurrencyChange}
                disabled={readOnly}>
                {currencies.map(cur => <option key={cur} value={cur}>
                    {cur}
                </option>)}
            </select>
        </div>
    );
};
export default MoneyInput;